<template>
  <div v-if="showMask" class="page-guide">
    <div class="help-step-mask"></div>
    <guide-step
      id="guideStep"
      :visible="showMask && !!stepInfo"
      :steps="steps"
      :step="curStep"
      :info="stepInfo"
      :position="stepInfo.position"
      @next-step="nextStep"
      @close-step="closeStep"
      @restart-step="restartStep"></guide-step>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import GuideStep from '@com/GuideStep.vue'
import { subNotShowGuide } from '@apis/assessManage'
export default {
  name: 'PageGuide',
  components: { GuideStep },
  props: {},
  data() {
    return {
      showMask: false,
      curStep: 1,
      steps: 7,
      stepInfo: null,
      stepsInfo: {
        1: {
          step: 1,
          title: '机构管理',
          desc: '首先，在“机构管理”中添加本单位的下属管理部门。可对其进行机构的新增、修改、删除管理。',
          img: '',
          position: null,
          iconInfo: {
            icon: 'iconfont kh-arrow-left',
            style: { top: '0px', left: '-55px' },
          },
        },
        2: {
          step: 2,
          title: '用户管理',
          desc: '用户管理是对被考核人员信息进行管理，包括增、删、改、查操作。同时支持单个添加和批量导入功能',
          img: '',
          position: null,
          iconInfo: {
            icon: 'iconfont kh-arrow-left',
            style: { top: '0px', left: '-55px' },
          },
        },
        3: {
          step: 3,
          title: '角色管理',
          desc: '角色管理是对被考核人员进行角色授权及各角色功能描述的查看，以便管理员对考核人员进行准确角色授权。',
          img: '',
          position: null,
          iconInfo: {
            icon: 'iconfont kh-arrow-left',
            style: { top: '0px', left: '-55px' },
          },
        },
        4: {
          step: 4,
          title: '职位管理',
          desc: '职位管理是根据机构“三定”对职位进行专门管理，主要包括新增职位、编辑职位、查看职位、职位授权等功能。',
          img: '',
          position: null,
          iconInfo: {
            icon: 'iconfont kh-arrow-left',
            style: { top: '100px', left: '-55px' },
          },
        },
        5: {
          step: 5,
          title: '指标模型',
          desc: '在“指标模型”中可以根据绩效考核需求和考核重点灵活调控指标分类、计算方式、指标权重，建立符合本单位的指标考核模型',
          img: '',
          position: null,
          iconInfo: {
            icon: 'iconfont kh-arrow-left',
            style: { top: '0px', left: '-55px' },
          },
        },
        6: {
          step: 6,
          title: '考核模板',
          desc: '考核模板中涉及员工考核的评价方式、评价审批流程配置，支持配置不同的考核模板；此外系统内置了多种不同类型的考核流程可供选择使用。',
          img: '',
          position: null,
          iconInfo: {
            icon: 'iconfont kh-arrow-left',
            style: { top: '0px', left: '-55px' },
          },
        },
        7: {
          step: 7,
          title: '考核管理',
          desc: '管理员可在线发起考核，并对考核流程进行管控。发起考核后工作人员将按照管理员设置的考核模板填写相关的考核内容，及考核流程的流转。',
          img: '',
          position: null,
          iconInfo: {
            icon: 'iconfont kh-arrow-left',
            style: { top: '0px', left: '-55px' },
          },
        },
      },
    }
  },
  computed: {
    ...mapGetters(['loginCount']),
    ...mapGetters('role', ['isMainRole']),
  },
  watch: {},
  created() {},
  mounted() {
    window.addEventListener('resize', this.setPosition)
    this.nextStep(1)
  },
  methods: {
    // openGuide() {
    //   if (localStorage.ZB_LOGIN_COUNT === undefined) {
    //     setTimeout(() => {
    //       this.openGuide()
    //     }, 500)
    //   } else {
    //     if (this.isMainRole && localStorage.pskh_userId && this.loginCount < 2) {
    //       setTimeout(() => {
    //         this.nextStep(1)
    //       }, 500)
    //     }
    //   }
    // },
    setPosition() {
      let marginGap = 100
      // if (window.innerWidth) {
      //   winWidth = window.innerWidth
      // } else if (document.body && document.body.clientWidth) {
      //   winWidth = document.body.clientWidth
      // }
      if (window?.matchMedia('(max-width:1360px)')?.matches) {
        marginGap = 20
      } else if (window?.matchMedia('(max-width:1620px)')?.matches) {
        marginGap = 50
      } else {
        marginGap = 100
      }
      console.log(marginGap)

      const idStr = `guide-step-${this.curStep}`
      const stepEl = document.getElementById(idStr)
      if (!stepEl) {
        return false
      }
      if (stepEl && this.curStep <= 4) {
        this.$EventBus.$emit('scroll', stepEl.offsetTop)
      } else {
        this.$EventBus.$emit('scroll', 0)
      }
      const stepEl1 = document.getElementById('slide-content')
      const stepEl2 = document.getElementById('slide-menu')
      const subHeight = stepEl1.offsetHeight - stepEl2.offsetHeight
      console.log('subHeight :>> ', subHeight)
      let scrollHeight = 0
      if (subHeight >= 0) {
        scrollHeight = 0
      } else {
        const height1 = document.getElementById('guide-step-1').offsetTop
        if (height1 + subHeight > 0) {
          scrollHeight = -subHeight + 30
        } else if (height1 > stepEl.offsetTop) {
          scrollHeight = -subHeight
        } else {
          scrollHeight = height1
        }
      }

      let top = 0
      let left = 0
      if (this.curStep === 1) {
        top = stepEl.offsetTop - scrollHeight + 72 + 'px'
        left = stepEl.offsetLeft + stepEl.clientWidth + 60 + 'px'
      } else if (this.curStep === 2) {
        if (subHeight > 0) {
          top = stepEl.offsetTop + 300 + 'px'
        } else {
          top = stepEl.offsetTop - stepEl.offsetTop + 300 + 'px'
        }
        left = stepEl.offsetLeft + stepEl.clientWidth + 90 + 'px'
      } else if (this.curStep === 3) {
        top = stepEl.offsetTop - scrollHeight + 300 + 'px'
        left = stepEl.offsetLeft + stepEl.clientWidth + 90 + 'px'
      } else if (this.curStep === 4) {
        top = stepEl.offsetTop - scrollHeight + 200 + 'px'
        left = stepEl.offsetLeft + stepEl.clientWidth + 90 + 'px'
      } else if (this.curStep === 5) {
        top = stepEl.offsetTop + 72 + 'px'
        left = stepEl.offsetLeft + stepEl.clientWidth + 60 + 'px'
      } else if (this.curStep === 6) {
        top = stepEl.offsetTop + 72 + 'px'
        left = stepEl.offsetLeft + stepEl.clientWidth + 60 + 'px'
      } else if (this.curStep === 7) {
        top = stepEl.offsetTop + 72 + 'px'
        left = stepEl.offsetLeft + stepEl.clientWidth + 60 + 'px'
      } else {
        top = '50%'
        left = '50%'
      }
      this.stepsInfo[this.curStep].position = {
        top,
        left,
      }
      this.stepInfo = this.stepsInfo[this.curStep]
    },
    setStepElStyle(bool) {
      // console.log('bool :>> ', bool)
      const stepEls = document.querySelectorAll('.guide-step')
      // console.log('object :>> ', stepEls)
      if (stepEls && stepEls.length) {
        for (let i = 0; i < stepEls.length; i++) {
          stepEls[i].style = null
        }
        if (bool) {
          const idStr = `guide-step-${this.curStep}`
          const stepEl = document.getElementById(idStr)
          stepEl.style.zIndex = 100
          stepEl.style.backgroundColor = '#fff'
          stepEl.style.borderRadius = '6px'
        }
      }
    },
    nextStep(step) {
      if (step > this.steps) {
        this.stepInfo.position = {
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
          height: '320px',
        }
        this.$nextTick(() => {
          this.curStep = step
          this.setPosition()
          this.setStepElStyle(this.curStep <= this.steps)
          this.showMask = true
        })
      } else {
        if ([1].includes(step)) {
          this.$router.push({
            name: 'JXGL_DEPART_MANAGE',
          })
        } else if ([2].includes(step)) {
          this.$router.push({
            name: 'JXGL_CONSUMER_MANAGE',
          })
        } else if ([3].includes(step)) {
          this.$router.push({
            name: 'JXGL_ROLE_MANAGE',
          })
        } else if ([4].includes(step)) {
          this.$router.push({
            name: 'JXGL_POST_MANAGE',
          })
        } else if ([5].includes(step)) {
          this.$router.push({
            name: 'JXGL_INDEX_MANAGE',
          })
        } else if ([6].includes(step)) {
          this.$router.push({
            name: 'JXGL_MOULD_MANAGE',
          })
        } else if ([7].includes(step)) {
          this.$router.push({
            name: 'JXGL_ASSESS_MANAGE',
          })
        }
        this.$nextTick(() => {
          this.curStep = step
          this.setPosition()
          this.setStepElStyle(this.curStep <= this.steps)
          this.showMask = true
        })
      }
    },
    closeStep() {
      this.$store.commit('setLoginCount', this.loginCount + 1)
      this.showMask = false
      this.curStep = 1
      this.setPosition()
      this.setStepElStyle(false)
      this.stepInfo = this.stepsInfo[this.curStep]
      subNotShowGuide().then(res => {})
      localStorage.removeItem('isShowGuide')
    },
    restartStep() {
      this.curStep = 1
      this.nextStep(1)
    },
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.setPosition)
  },
}
</script>
<style lang="scss" scoped>
.page-guide {
  .help-step-mask {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    background-color: rgba($color: #000000, $alpha: 0.25);
  }
}
</style>
